---
title: Accordion
description: A set of collapsible panels with headings.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-base-accordion" />

## Installation

<ComponentInstallation name="components-base-accordion" />

## Usage

```tsx
<Accordion>
  <AccordionItem>
    <AccordionTrigger>Accordion Item 1</AccordionTrigger>
    <AccordionPanel>
      <div>Accordion Content 1</div>
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionTrigger>Accordion Item 2</AccordionTrigger>
    <AccordionPanel>
      <div>Accordion Content 2</div>
    </AccordionPanel>
  </AccordionItem>
</Accordion>
```

## API Reference

### Accordion

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/base/accordion#accordion"
  text="Animate UI API Reference - Accordion Primitive"
/>

<ExternalLink
  href="https://base-ui.com/react/components/accordion#roott"
  text="Base UI API Reference - Accordion.Root"
/>
</div>

### AccordionItem

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/base/accordion#accordionitem"
  text="Animate UI API Reference - Accordion Item Primitive"
/>

<ExternalLink
  href="https://base-ui.com/react/components/accordion#item"
  text="Base UI API Reference - Accordion.Item"
/>
</div>

### AccordionTrigger

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/base/accordion#accordiontrigger"
  text="Animate UI API Reference - Accordion Trigger Primitive"
/>

<ExternalLink
  href="https://base-ui.com/react/components/accordion#trigger"
  text="Base UI API Reference - Accordion.Trigger"
/>
</div>

<TypeTable
  type={{
    showArrow: {
      description: 'Whether to show the arrow icon.',
      type: 'boolean',
      required: false,
      default: 'true',
    },
  }}
/>

### AccordionPanel

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/base/accordion#accordionpanel"
  text="Animate UI API Reference - Accordion Panel Primitive"
/>

<ExternalLink
  href="https://base-ui.com/react/components/accordion#panel"
  text="Base UI API Reference - Accordion.Panel"
/>
</div>

<TypeTable
  type={{
    transition: {
      description: 'The transition of the accordion panel',
      type: 'Transition',
      required: false,
      default: "{ type: 'spring', stiffness: 150, damping: 22 }",
    },
    keepRendered: {
      description:
        'Whether to keep the accordion panel rendered (useful for SEO)',
      type: 'boolean',
      required: false,
      default: 'false',
    },
    '...props': {
      description: 'The props of the accordion panel.',
      type: 'HTMLMotionProps<"div">',
      required: false,
    },
  }}
/>

<Callout type="info">
  The `render` and `keepMounted` props are not supported in the `AccordionPanel`
  component as it is used for animation.
</Callout>

## Credits

- [Base UI Accordion](https://base-ui.com/react/components/accordion)
- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/accordion) for style inspiration.
